<clr-modal #keygenModal [clrModalSize]="'lg'">
    <h3 class="modal-title">
        Generate new keys
    </h3>

    <div class="modal-body" style="min-height: 30vh;">

        <h5 class="bold highlight">
            We recommend you <span class="error">disconnet from the internet</span>
        </h5>

        <h5>
            Please click the <span style="cursor:pointer;" class="highlight-primary"> Generate Key Pair </span> button.
        </h5>

        <!--        PUBLIC KEY-->
        <mat-form-field class="mt-3" style="width: 550px">
            <label>
                <input style="font-family: 'SourceCodePro',monospace" matInput placeholder="Public key" [(ngModel)]="pubKey">
            </label>
            <a matSuffix class="tooltip tooltip-xs tooltip-right">
                <fa-icon  [icon]="['far', 'clone']" size="lg" class="copy"
                         (click)="copy(pubKey)"></fa-icon>
                <span class="tooltip-content">Copy</span>
            </a>

            <mat-hint>ctrl c + ctrl v to copy & paste</mat-hint>
        </mat-form-field>

        <!--        PRIVATE KEY-->
        <mat-form-field class="mt-3" style="width: 550px">
            <label>
                <input style="font-family: 'SourceCodePro',monospace" matInput placeholder="Private key" [(ngModel)]="prvKey">
            </label>
            <a matSuffix class="tooltip tooltip-xs tooltip-right">
                <fa-icon [icon]="['far', 'clone']" size="lg" class="copy"
                     (click)="copy(prvKey)"></fa-icon>
                <span class="tooltip-content">Copy</span>
            </a>
            <mat-hint>ctrl c + ctrl v to copy & paste</mat-hint>
        </mat-form-field>

        <br/>

        <button class="btn btn-primary"
                style="margin: 30px 0 20px;"
                (click)="generateNKeys()">
            Generate Key Pair
        </button>

        <fa-layers *ngIf="generating" class="highlight-primary fa-fw">
            <fa-icon [icon]="['far','spinner']" size="2x" [spin]="true"></fa-icon>
        </fa-layers>

    </div>

    <div class="modal-footer" style="padding: 0.5rem 0 0 0;">
        <div *ngIf="generated" style="clear:both;padding-top: 5px;">
            <mat-checkbox [(ngModel)]="agreeKeys">I have saved all my keys in a safe place</mat-checkbox>
        </div>
        <button [disabled]="pubKey === '' || prvKey === '' || !agreeKeys" type="button" class="btn btn-info-outline"
                (click)="onFinish()">
            FINISH
        </button>
    </div>
</clr-modal>
